@class-prefix-stepper: ~'bbt-stepper';

.@{class-prefix-stepper} {
  --height: 28px;
  --input-width: 44px;
  --input-font-size: 13px;
  --input-font-color: #333333;
  --input-background-color: #f5f5f5;
  --border-radius: 2px;
  --border: none;
  --border-inner: solid 2px transparent;
  --active-border: var(--border);
  --button-font-size: 15px;
  --button-text-color: #1677ff;
  --button-background-color: #f5f5f5;
  --button-width: var(--height);

  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  width: calc(var(--input-width) + 2 * var(--button-width));
  border: var(--border);
  border-radius: var(--border-radius);
  &-active {
    border: var(--active-border);
  }

  &-middle {
    flex: 1;
    border-left: var(--border-inner);
    border-right: var(--border-inner);
  }

  .@{class-prefix-stepper}-input {
    height: var(--height);
    --background-color: var(--input-background-color);
    --font-size: var(--input-font-size);
    --color: var(--input-font-color);
    --text-align: center;
  }

  &-minus,
  &-plus {
    width: var(--button-width);
    height: var(--height);
    padding: 0;
    color: var(--button-text-color);
    background-color: var(--button-background-color);
    font-size: var(--button-font-size);
    --border-width: 0;
    --border-radius: 0;
    --border-color: #eeeeee;
    --border-style: solid;

    position: relative;
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    line-height: 1.4;
    text-align: center;
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: opacity ease 0.15s;
    user-select: none;
    &:focus {
      outline: none;
    }
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(
        calc(var(--border-width) * -1),
        calc(var(--border-width) * -1)
      );
      width: 100%;
      height: 100%;
      background-color: #000;
      border: var(--border-width) var(--border-style) #000;
      border-radius: var(--border-radius);
      opacity: 0;
      content: ' ';
      box-sizing: content-box;
    }
    &:active::before {
      opacity: 0.08;
    }
  

    &:disabled {
      color: #999999;
      cursor: not-allowed;
      opacity: 0.4;
      &:active::before {
        display: none;
      }
    }
    svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  &-minus {
    border-radius: 0;
  }

  &-plus {
    border-radius: 0;
  }
}
